<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <!-- metatags-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Transitive register form a Flat Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Meta tag Keywords -->
    <link href="${pageContext.request.contextPath}/css/register.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.css"><!--font_wesome_icons-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css" media="all">
    <style type="text/css">
        select {
            border:0px;
            outline:none;
        }
    </style>
</head>
<body>
<div class="w3ls-headding">
    <h1>强强组合商场</h1>
</div>
<div class="agile-main">
    <div class="agile-left">

    </div>
    <div class="agile-right">
        <form action="#" method="post" class="layui-form" >
            <div class="agile-right-h2">
                <h2> 注册</h2>
            </div>
            <div class="w3l-name">
                <span><i class="fa fa-user" aria-hidden="true"></i></span>
                <input type="text" id="accName" name="Username" lay-verify="required|title|usernameExist" lay-reqtext="用户名是必填项，岂能为空？" placeholder="用户名" />
            </div>
            <div class="clear"></div>
            <div class="clear"></div>
            <div class="w3l-psw">
                <span><i class="fa fa-lock" aria-hidden="true"></i></span>
                <input type="password" id="accPwd" name="password" placeholder="密码" lay-verify="required|pass" lay-reqtext="密码是必填项，岂能为空？"/>
            </div>
            <div class="clear"></div>
            <div class="w3l-cpsw">
                <span><i class="fa fa-lock" aria-hidden="true"></i></span>
                <input type="password" name="password" placeholder="确认密码" lay-verify="required|confirmPass" lay-reqtext="请确认密码"/>
            </div>
            <!-- 邮箱 -->
            <div class="w3l-email">
                <span><i class="fa fa-envelope" aria-hidden="true"></i></span>
                <input type="email" id="accEmail" name="email" placeholder="邮箱" lay-verify="required|email" lay-reqtext="请填写邮箱地址"/>
            </div>
            <%--院校--%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-search="" lay-reqtext="请选择所在院校" id="school">

                        </select>
                    </div>
                </div>
            </div>
            <div class="w3l-agree" style="float: left;vertical-align: top;">
                <input type="checkbox" class="checkbox" lay-verify="selected">
                <p style="vertical-align: top;">我同意用户协议</p>
            </div>
            <div class="clear"></div>
            <br>
            <%--表单提交--%>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <p class="wthree-p">  已有账号？  </p>
        <div class="wthree-social">
            <a href="login.jsp"> 立即登录 </a>
        </div>
    </div>
    <div class="clear"></div>
</div>
<footer>
    <p>&copy; transitive register Form. All Rights Reserved | Design by <a href="http://xmoban.cn/"> W3layouts</a></p>
</footer>

</body>

<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>

<script>
    $(function (){
        var usernameExist = false;

        /*判断用户名是否存在*/
        $("#accName").blur(function (){
            var accName = $("#accName").val();
            var param = {
                accName:accName
            }
            if(accName != ""){
                var url = "/register/accountNameExist";
                $.get(url,param,function (data){
                    if(data.code == 1002){
                        usernameExist = true;
                        $("accName").focus();
                        return layer.msg(data.msg);
                    }else if(data.code == 1001){
                        usernameExist = false;
                    }
                })
            }
        })


        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;

            form.render();

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义表单验证规则 （input输入框中的属性 lay-verify 的值与下面对应）
            // required 内置的校验 输入框内容不能为空
            //title 指标题验证，pass 指密码验证，可以自定义正则表达式，confirmPass 指两次密码相同验证
            form.verify({
                title: function(value){
                    if(value.length < 2){
                        return '用户名至少得2个字符啊';
                    }
                }
                ,usernameExist: function (value){   //判断用户名是否存在
                    if(usernameExist){
                        return '该用户名已存在';
                    }
                }
                ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,email: [
                    /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
                    ,'邮箱地址不正确'
                ]
                ,content: function(value){
                    layedit.sync(editIndex);
                }
                ,confirmPass:function(value){
                    if($('input[name=password]').val() !== value)
                        return '两次密码输入不一致！';
                }
                ,selected:function (value){
                    if($('input[type=checkbox]').prop("checked") == false){
                        return '请同意并勾选用户协议！';
                    }
                }
            });

            //监听表单提交
            form.on('submit(demo1)', function(data){
                layer.confirm('确定提交吗？', function(index){ //弹出确定提交弹窗
                    var param = {
                        schoolId: $("#school").val(),
                        accName: $("#accName").val(),
                        accPwd: $("#accPwd").val(),
                        accEmail: $("#accEmail").val(),
                    }
                    /*发送新增用户请求*/
                    var url = "/register/accountRegister";
                    $.post(url,param,function (data){
                        if(data.code == 1001){      //修改成功跳转到 院校信息页面
                            //    layer.msg(data.msg);
                            layer.closeAll();       //关闭确认提交的弹出
                            layer.open({
                                type: 1    //类型设置为 1，表示弹出层弹出的内容是 string
                                ,content: '<div style="padding: 20px 100px;">'+ data.msg +'</div>'
                                ,btn: '确定'
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,yes: function(){
                                    //    layer.closeAll();
                                    top.location='login.jsp';  //点击确定后跳转到 登录页面
                                }
                            });


                        }else if(data.code == 1002){
                            layer.msg(data.msg);
                        }
                    })
                });

                return false;
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function(){
                var data = form.val('example');
                alert(JSON.stringify(data));
            });

        });


        /*查询院校集合*/
        var url = "/admin/selectAllSchools";
        $.get(url,function (data){
            if(data.code = 1001){
                var content = "<option value=''>请选择院校</option>";
                for(var i=0;i<data.allSchools.length;i++){
                    var school = data.allSchools[i];
                    content += "<option value='"+school.schoolId+"'>"+school.schName+"</option>"
                }
                $("#school").html(content);
            }
        })


    })

</script>

</html>